<template>
  <div class="content">
    <el-scrollbar height="730px">
      <el-row>
        <el-col :span="24">
          <div class="card">
            <el-descriptions class="margin-top" title="会议汇总" :column="3" size="large" border>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <DataLine />
                    </el-icon>
                    创建的会议数量
                  </div>
                </template>
                1
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <FirstAidKit />
                    </el-icon>
                    加入的会议数量
                  </div>
                </template>
                1
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>

        <el-col :span="24">
          <div class="table">
            <div class="card-header">最近会议记录</div>
            <el-table :data="tableDate" stripe style="width: 100%">
              <el-table-column prop="date" label="会议时间" />
              <el-table-column prop="name" label="会议创建人" />
              <el-table-column prop="stutas" label="会议状态" />
              <el-table-column prop="title" label="会议名称" />
              <el-table-column prop="cnum" label="参会人数" />
              <el-table-column prop="qnum" label="签到人数" />
              <el-table-column prop="nqnum" label="未签人数" />
              <el-table-column prop="ifq" label="是否签到">
                <template #default="scope">
                  <el-tag type="success" v-if="scope.row.ifq">是</el-tag>
                  <el-tag type="danger" v-if="!scope.row.ifq">否</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <el-button type="danger">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <div class="tab">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>我创建的会议</span>

                    <el-button type="primary" class="button" @click="drawer = true">创建新的会议</el-button>

                    <el-drawer ref="drawerRef" v-model="drawer" title="创建新的会议" :before-close="handleClose"
                      direction="ltr" size="50%">
                      <div class="demo-drawer__content">
                        <el-form :model="form">
                          <el-row>
                            <el-col :span="12">
                              <el-form-item class="f1" label="发起人" :label-width="formLabelWidth">
                                chenlh
                              </el-form-item>
                            </el-col>
                            <el-col :span="6">
                              <el-form-item label="会议秘钥" :label-width="formLabelWidth">
                                fadgafa
                              </el-form-item>
                            </el-col>


                            <el-form-item label="会议名称" :label-width="formLabelWidth">
                              <el-input v-model="form.mname" placeholder="请输入会议名称" />
                            </el-form-item>

                            <el-form-item label="时间" :label-width="formLabelWidth">
                              <el-date-picker v-model="form.value2" type="datetimerange" start-placeholder="开始时间"
                                end-placeholder="结束时间" :default-time="defaultTime2" />
                            </el-form-item>

                            <el-form-item label="选择参会人" label-position="top" :label-width="formLabelWidth">
                              <div style="text-align: center">
                                <el-transfer v-model="rightValue" style="text-align: left; display: inline-block"
                                  filterable :left-default-checked="[0, 0]" :right-default-checked="[0]"
                                  :titles="['可选参会人', '已选参会人']" :button-texts="['移除', '加入']" :format="{
                                    noChecked: '${total}',
                                    hasChecked: '${checked}/${total}',
                                  }" :data="data" @change="handleChange">
                                  <template #default="{ option }">
                                    <span>{{ option.key }} - {{ option.label }}</span>
                                  </template>
                                </el-transfer>
                              </div>
                            </el-form-item>


                          </el-row>
                        </el-form>
                        <div class="demo-drawer__footer">
                          <el-button @click="cancelForm">取消</el-button>
                          <el-button type="primary" @click="onClick()">创建</el-button>
                        </div>
                      </div>
                    </el-drawer>
                  </div>
                </template>
                <el-table :data="tableDate" stripe style="width: 100%">
                  <el-table-column prop="date" label="会议时间" />
                  <el-table-column prop="stutas" label="会议状态" />
                  <el-table-column prop="title" label="会议名称" />
                  <el-table-column prop="cnum" label="参会人数" />
                  <el-table-column prop="qnum" label="签到人数" />
                  <el-table-column prop="nqnum" label="未签人数" />
                  <el-table-column label="操作">
                    <el-button type="danger">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </el-button>
                  </el-table-column>
                </el-table>

              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>我加入的会议</span>
                    <el-button type="primary" class="button" @click="dialog = true">加入会议</el-button>
                    <el-dialog v-model="dialog" title="加入会议">
                      <el-form-item label="会议名称" :label-width="formLabelWidth">
                        <el-input v-model="form.mname" autocomplete="off" />
                      </el-form-item>
                      <el-form-item label="会议密钥" :label-width="formLabelWidth">
                        <el-input v-model="form.mkey" autocomplete="off" />
                      </el-form-item>
                      <div class="demo-drawer__footer" justify="center">
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary">加入</el-button>
                      </div>
                    </el-dialog>
                  </div>
                </template>
                <el-table :data="tableDate" stripe style="width: 100%">
                  <el-table-column prop="date" label="会议时间" />
                  <el-table-column prop="stutas" label="会议状态" />
                  <el-table-column prop="title" label="会议名称" />
                  <el-table-column prop="ifq" label="是否签到">
                    <template #default="scope">
                      <el-tag type="success" v-if="scope.row.ifq">是</el-tag>
                      <el-tag type="danger" v-if="!scope.row.ifq">否</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200px">
                    <template #default="scope">
                      <el-button type="primary" :disabled="scope.row.ifq">签到</el-button>
                      <el-button type="danger">
                        退出会议
                      </el-button>
                    </template>

                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElDrawer, ElMessage, ElMessageBox } from 'element-plus'

interface Option {
  key: number
  label: string
  disabled: boolean
}

const form2 = reactive({
  name: "chenlh"
})

let drawer = ref(false)
const dialog = ref(false)

const defaultTime2 = [
  new Date(2000, 1, 1, 12, 0),
  new Date(2000, 2, 1, 8, 0),
]

const formLabelWidth = '100px'


const form = reactive({
  mname: '',
  muname: '',
  mkey: '',
  value2: "",
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})


const handleClose = (done) => {
  ElMessageBox.confirm('是否关闭')
    .then(() => {
      drawer.value = false;
    })
    .catch(() => {

    })
}

const cancelForm = () => {
  drawer.value = false
}
const onClick = () => {
  ElMessage.success('创建成功');
  drawer.value = false
}
const cancel = () => {
  dialog.value = false
}

const tableDate = [
  {
    date: "2022-05-10",
    name: "csw",
    title: "nbdh",
    qnum: 10,
    cnum: 14,
    nqnum: 4,
    ifq: true,
    stutas: '已结束',
  },
  {
    date: "2022-05-10",
    name: "csw",
    title: "nbdh",
  },
  {
    date: "2022-05-10",
    name: "csw",
    title: "nbdh",
  },
  {
    date: "2022-05-10",
    name: "csw",
    title: "nbdh",
  },
  {
    date: "2022-05-10",
    name: "cfadfa",
    title: "nbdh",
  },
];
const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `用户 ${i}`,
      disabled: false,
    })
  }
  return data
}

const data = ref(generateData())
const rightValue = ref([0])
const leftValue = ref([0])
const handleChange = (
  value: number | string,
  direction: 'left' | 'right',
  movedKeys: string[] | number[]
) => {
  console.log(value, direction, movedKeys)
}


</script>

<style scoped>
a {
  text-decoration: none;
  color: black;
  font-size: 30px;
}

.card {
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}

.box-card {
  margin-right: 100px;
  width: 100%;
  margin-top: 20px;
}

.button {
  margin-left: 400px;
}

.table {
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.6);
}

.card-header {
  font-weight: 600;
  margin: 5px;
}

.demo-drawer__footer {
  margin-left: 40%;
}

.tab {
  width: 100%;
}
</style>